<template>
    <div class="gw-footer">
        <div :class="['gw-list',{active: key === currentKey}]"
             @click = "switcher(key)"
             v-for="(value,key) in gw_list"
             :key = key
        >
          <img :src = "value.img" alt="">
          <p>{{value.title}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Appfooter",
        data(){
          return{
            currentKey:0,
            gw_list:[
              // require动态将图片作为模块加载
              {title:'首页',img: require('../assets/01.png'),jump: ''},
              {title:'比赛',img: require('../assets/02.png'),jump: ''},
              {title:'社区',img: require('../assets/03.png'),jump: './community/appHeader.vue'},
              {title:'识货',img: require('../assets/04.png'),jump: './YESOR/appHeader.vue'},
              {title:'更多',img: require('../assets/05.png'),jump: ''}]
          }
      },
      methods:{
        switcher(index){
          this.currentKey = index
        }
      },
      components:{

      }
    }
</script>
<style scoped>
  .gw-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: #edf0f0;
    font-size: 0;
  }
  .gw-list{
    display: inline-block;
    width: 20%;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    vertical-align: bottom;
  }
  .gw-list img {
    margin-top: 20px;
    width: 40px;
    display: inline-block;
    vertical-align: middle;
  }
  .active{
    color: white;
    background-color: #a15a68;
  }
</style>
